<template>
    <div id="app">
        <div class="types">
            <el-radio v-for="(item,ind) in typeList" :key="ind" 
                :name="item.name"
                :status="item.status"
                :ind="ind"
                @select="select"
            ></el-radio>
        </div>
        <div class="date">
            <ul>
                <li :class="{active:item.status}" v-for="(item,ind) in dateList" :key="item.num"
                    @click="choose(ind)"
                >{{item.num}}</li>
            </ul>
        </div>
        <button @click="reset">reset</button>
        <button @click="submit">submit</button>
    </div>
</template>

<script>
import elRadio from './components/el-radio'
export default {
    created(){
        console.log(this.totalDay);
        this.createDate(this.totalDay);
    },
    data(){
        return {
            typeList:[
                {
                    name:'today',
                    status:false
                },
                {
                    name:'yes',
                    status:false
                },
                {
                    name:'week',
                    status:false
                },
                {
                    name:'custom',
                    status:false
                }
            ],
            dateList:[],
            curMonth:new Date().getMonth() + 1,
            selectArr:[],
            curDay:new Date().getDate(),
            totalDay:new Date(2019,new Date().getMonth() + 1,0).getDate(),
            isClick:false,
            start:'',
            end:''
        }
    },
    components:{
        elRadio
    },  
    methods:{
        select(ind,name){
            this.typeList.forEach(item => item.status = false);
            this.typeList[ind].status = true;

            this.reset();
            this.createDate(this.totalDay);
            this.isClick = false;

            if(name === 'today'){
                this.dateList[this.curDay - 1].status = true;
            }else if(name === 'yes'){
                if(this.curDay === 1){
                    let totalDay = new Date(2019,this.curMonth-1,0).getDate();
                    this.createDate(totalDay);
                    this.dateList[totalDay-1].status = true;
                }else{
                    this.dateList[this.curDay - 2].status = true;
                }
            }else if(name === 'week'){
                this.rangSelect(this.curDay-1,this.curDay+6);
            }else if(name === 'custom'){
                this.isClick = true;
            }
        },
        createDate(totalDays){
            this.dateList.splice(0);
            for(let i = 0;i<totalDays;i++){
                this.dateList.push({
                    num:i+1,
                    status:false
                })
            }
        },
        reset(){
            this.end = '';
            this.start = '';
            this.dateList.forEach(item => item.status = false);
        },
        submit(){
            this.selectArr = this.dateList.filter(item => item.status);
        },
        rangSelect(start,end){
            for(let s = start;s<end;s++){
                this.dateList[s].status = true;
            }
        },
        choose(ind){
            if(this.isClick){
                if(this.end){
                    this.reset();
                }
                
                if(this.start === 0 || this.start){
                    if(ind < this.start){
                        alert("不能小于")
                    }else{
                        this.end = ind;
                        this.rangSelect(this.start,this.end+1);
                    }
                }else{
                    this.start = ind;
                    this.dateList[ind].status = true;
                }
                
            }
        }
    }
}
</script>

<style lang="scss">
    *{
        margin:0;
        padding:0;
        list-style: none;
    }

    html,body,#app{
        width:100%;
        height:100%;
        overflow: hidden;
    }
    .date ul{
        width:80%;
        margin:0 auto;
        display: flex;
        flex-wrap: wrap;
        li{
            width:14.2%;
            height: 40px;
            &.active{
                background: blue;
            }
        }
    }
</style>
